<template>
  <view class="article-con">
    <view class="color-000 font-32 text-c">{{ articleCon.title }}</view>
    <view class="color-8c8c8c font-28 u-m-t-16 u-m-b-40 text-c">{{
      articleCon.createTime
    }}</view>
    <u-parse :content="articleCon.content"></u-parse>
    <view class="column-item" v-show="articleCon.fileInfo&&JSON.parse(articleCon.fileInfo).length">
      <view class="label">附件：</view>
      <view
        class="file-item"
        v-for="item in JsonObj(articleCon.fileInfo)"
        @click="downloadFile(item.fileurl)"
        :key="item.fileurl"
        >{{ item.filename }}</view
      >
    </view>
  </view>
</template>
<script setup>
import config from "@/config";
import {computed} from "vue"
const JsonObj = computed((obj)=>(obj)=>{
  return obj ? JSON.parse(obj) : []
})
  const downloadFile = (url) => {
  uni.downloadFile({
    url: config.baseUrl + url, //下载地址，后端接口获取的链接
    success: (data) => {
      if (data.statusCode === 200) {
        uni.saveFile({
          //文件保存到本地
          tempFilePath: data.tempFilePath, //临时路径
          success: function (res) {
            uni.showToast({
              icon: "none",
              mask: true,
              title: "点击右上角保存到手机",
              duration: 3000,
            });
            uni.openDocument({
              //fileType: 'docx',
              showMenu: true, //关键点,可以转发到微信
              filePath: res.savedFilePath,
              success: function (res) {},
            });
          },
        });
      }
    },
    fail: (err) => {
      uni.showToast({
        icon: "none",
        mask: true,
        title: "失败请重新下载",
      });
    },
  });
};
defineProps({
  articleCon: {
    type: Object,
    default: () => {},
  },
});
</script>
<style lang="scss" scoped>
.article-con {
  background-color: #fff;
  width: 100%;
  min-height: 100vh;
  padding: 56rpx 32rpx 56rpx;
  box-sizing: border-box;
  .column-item {
    .label {
      color: #1e1e1e;
      font-size: 26rpx;
      font-weight: bold;
      margin: 20rpx 0;
    }
    .file-item {
      margin: 20rpx 0;
      color: blue;
      font-size: 26rpx;
    }
  }
}
</style>
